BAGI YANG UDAH BUkA BLOG GW TOLONG DI FOLLOW YAAAAAA.....

BAGI YANG CEWEK SEKALIAN FOLLOW TWITTER KU @SAPUTRA_WINDU

 

 


Tampilkan postingan dengan label desain web. Tampilkan semua postingan
Tampilkan postingan dengan label desain web. Tampilkan semua postingan

Web Design Grafis

Menurut saya desain grafis adalah suatu ilmu atau tekhnik yang digunakan untuk merancang , membuat dan mengolah suatu gambar , tulisan , ataupun karya seni lainnya agar karya seni tersebut memiliki nilai tambah seni yang baik. Untuk dapat menciptakan suatu karya seni dengan menggunakan desain grafis yang baik , pada dasarnya ada enam prinsip yang penting untuk diketahui untuk membuat web design yaitu :

1.Metaphore
yaitu suatu penerapan prinsip – prinsip lama untuk digunakan pada suatu prinsip yang baru.
2.Clarity
yaitu suatu prinsip yang memberikan penjelasan – penjelasan mengenai suatu web.
3. Consistency
yaitu suatu prinsip yang berisikan mengenai konsistensi/ ketetapan dari isi suatu web yang akan kita buat.
4.Aligment
Yaitu Suatu prinsip yang berhubungan dengan kerapihan suatu tulisan. Umumnya dari kiri ke kanan dan dari atas kebawah. Usahakan dapat membuat mata pembaca seolah dituntun menelusuri alur tersebut.
5.Proximately
Yaitu suatu prinsip yang berhubungan dengan kelengkapan dari suatu field.
6.Contrast
Yaitu prinsip yang menjelaskan mengenai keamanan dan kenyamanan mata pembaca dalam melihat situs . baik dengan cara membesarkan ukuran, memberi warna, maupun menempatkannya pada posisi yang paling mudah dibaca.

Sumber dan inspirasi tulisan :
http://www.kapanpun.com/2008/07/yang-terpenting-dari-desain-grafis.html

Berikut ini adalah beberapa situs yang saya jadikan sampel penilaian saya berdasarkan salah satu prinsip dasar web desain.

1. Situs Worldwidestore.com
Dilihat dari prinsip pertama ( Metaphore ) , isi situs ini menurut saya sudah sangat memenuhi prinsip metaphore . Situs ini berisikan mengenai penjualan benda – benda peninggalan dimasa lampau yang disajikan berdasarkan lokasi – lokasi tempat ditemukannya benda – benda peninggalan tersebut , kemudian informasi tentang peninggalan benda tersebut dikemas dalam suatu web desain masa kini. Sehingga membuat pembaca lebih mudah mendapatkan informasi.

2. Situs schwab.com
Dilihat dari prinsip kedua ( Clarity ) , isi situs ini memberikan kejelasan secara lengkap mengenai bisnis penanaman modal (investasi) global dengan melalu media website. Dimulai dengan bagaimana cara kita berinvestasi , kemudia produk apa yang akan kita investasikan , dan dengan siapa kita melakukan investasi itu .

3. Situs Santafean.com
Dilihat dari prinsip ketiga ( Consistency) , isi dari situs ini menurut saya memenuhi dari prinsip consistency ( Ketetapan) , karena dalam situs ini walaupun memiliki bermacam - macam katagori , namun masih memiliki keterpaduan dalam bidang seni ( ART ) , atau dengan kata lain isi dari situs ini memiliki ketetapan dalam hal seni.
4. Situs Delta
Dilihat dari prinsip keenam ( contrast ) , situs ini telah dilengkapi dengan penempatan fitur - fitur yang strategis , sehingga fitur – fitur tersebut dapat dengan mudah membantu pengunjung situs dalam mencari menu – menu yang akan mereka pilih.
Label: | 0 komentar

Memasukkan Video Youtube ke Website

Langkah - langkahnya:

1. Buka Dreamweaver dan pilih File - New
Atau tekan CTRL + N = Untuk membuat project baru sebagai latihan

2. Buka Youtube.com dan cari video yang akan dimasukkan, disini saya memilih video penyanyi favorit saya yaitu "hitomi no junin", hehehe...
bagi yang bingung bisa cari di search youtube
tutorial dreamweaver

3. Pada masukkan / copy script yang ada di embed youtube dan paste pada sela antara TAG <body></body>
tutorial dreamweaver
Label: | 0 komentar

Membuat Rollover Image

Jika mungkin belum jelas maka silahkan saja coba ikuti pembuatannya dulu, maka siapa tahu nanti jadi lebih jelas apa yang dimaksudkan di atas

Dan seperti ini cara'a..
1. buka dreamweaver seperti biasa dan buat file baru berextensi html.. (anda bisa menggunakan tampilan Split maupun Code, tp saya terbiasa menggunakan tampilan code)
2. kita buat dulu bagian yang ingin dirollover gambar (backgroundnya) di antara tag <body></body> dengan menggunakan sebuah div tag dengan nama element menggunakan class atau id..
(di sini saya menggunakan element class)
berikut kode tag'a..

tampilan tersebut akan membuat sebuah link standar yang biasa digunakan tanpa ada style apapun..
dan berikut kode css yang ditaruh di antara tag <head></head>

#ffffff adalah bilangan hexadecimal untuk warna putih yang digunakan sebagai warna background..(saya menggunakan warna putih karena di halaman preview berlatarbelakang warna putih..)
* : cari dan isi gambar yang ingin digunakan untuk gambar awal dan gambar hover..
0 0 : merupakan posisi dari gambar backround 0 pertama adalah untuk posisi x dan 0 kedua adalah untuk posisi y..
no-repeat : merupakan perulangan dari gambar..no-repeat berarti tidak menggunakan perulangan..jika kalian ingin menggunakan perulangan..gunakan repeat-x untuk perulangan horizontal..dan repeat-y untuk perulangan vertical..
padding-left : memberikan jarak dari kiri untuk memperlihatkan gambar dari tulisan link yang ada..(saya menggunakan 20px karena lebar dari gambar adalah 15px..)
jika ingin menggunakan hover di setiap tag atau class atau id..cukup gunakan ":hover" setelah nama tag atau nama class atau nama id.. (tanpa kutip)
LIVE PREVIEW

Cara Lainnya::
Bagi yang masih kebingungan dengan permainan Tag dan CSS jangan kuatir karena ada cara alternatif dalam menampilkan rollover image karena di dalam aplikasi dreamweaver telah disediakan :)
1. Buka aplikasi Dreamweaver
2. Pilih Insert >> Image Objects >> Rollover Image
tutorial dreamweaver

3. Maka akan muncul pop up yang harus anda lengkapi
tutorial dreamweaver
Penjelasan:
Image name: adalah nama / judul Rollover image anda (isi sesuka anda)
Original image: gambar utama/default Rollover image
Rollover image: gambar kedua (gambar yang akan muncul saat kursor disorot)
Arternate text : adalah penjelasan tentang gambar tersebut mengenai apa (boleh dikosongi/ boleh diisi sesuka anda)
When Clicked, Go to URL: isi dengan URL link yang anda inginkan, bisa web anda, paman google, atau web IG yaitu >> http://www.ilmugrafis.com :)
Nah setelah selesai Klik OK, mudah bukan, sekarang coba buka halaman yang anda buat dengan browser anda (IE, Mozzila, Opera) whatever... yang penting minumnya teh sak kotaknya... wkwkwk :P
Just pudding
tutorial dreamweaver
Semoga Bermanfaat ^_^/
Label: | 0 komentar

BELAJAR Membuat WEBSITE - Basic HTML

BELAJAR WEBSITE

Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code
tutorial dreamweaver
disini anda akan menemui tag - tag semacam ini:
<HTML>
</HTML>
Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. 
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya.
<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombol Refresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:
tutorial dreamweaver
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:
tutorial dreamweaver
Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/
Label: | 0 komentar

Split Comment dan Trackback di WordPress

Sebelumnya saya mengalami sedikit masalah pada themes wordpress yang saya gunakan sekarang ini, masalahnya ada pada tampilan comment dan trackback, dimana comment dan trackback muncul berurutan pada di tempat yang sama. kemudian saya ingin merubah urutan tersebut, dimana akan dikelompokkan antara comment dan trackback, sehingga comment dan trackback akan muncul terpisah dan saling berkelompok. sebenarnya kalaupun tidak di kelompokkan tidak apa apa karena itu merupakan standar dari wordpress, tapi akan terlihat lebih rapi apabila antara comment dan trackback saling di kelompokkan.
kemudian atas petunjuk Suhu SEO, saya pun googling dengan clue ” Split comment and trackback “, akhirnya nemu sedikit titik terang. dan menemukan beberapa code, yang setelah dicoba akhirnya berhasil, comment dan trackback di blog saya ini bisa terkelompokkan.
dibawah ini saya akan share codenya, siapa tau ada yang tertarik.
pertama cari file : functions.php di dalam folder WordPress Themes yang anda gunakan, kemudian buka dan copykan.
SOURCE CODE
<?php
$bm_trackbacks = array();
$bm_comments = array();

function split_comments( $source ) {

if ( $source ) foreach ( $source as $comment ) {

global $bm_trackbacks;
global $bm_comments;

if ( $comment->comment_type == 'trackback' |
| $comment->comment_type == 'pingback' ) {
$bm_trackbacks[] = $comment;
} else {
$bm_comments[] = $comment;
}
}
} ?>
SOURCE CODE
kemudian SAVE.
Selanjutnya buka file comment.php , masih di foler yang sama. kemudian buka. :
SOURCE CODE
<?php
global $bm_comments;
global $bm_trackbacks;

split_comments( $comments ); ?>
SOURCE CODE
copy kan sebelum pengulangan.
kemudian rubah rubah sedikit struktur pada file comment :
rubah ”
 foreach ( $comments as $comment )"
menjadi ”
 foreach ( $bm_comments as $comment )
”
Sehingga strukturnya akan menjadi seperti :
SOURCE CODE
<?php

// --------
// COMMENTS
// --------

foreach ( $bm_comments as $comment ) {
// disini adalah code untuk memunculkan comment.
}

// ----------
// TRACKBACKS
// ----------

// check there actually are some trackbacks
if ( count( $bm_trackbacks ) > 0 ) {

foreach ( $bm_trackbacks as $comment ) { ?>
// disini adalah code untuk memunculkan trackback.
}

}

?>
SOURCE CODE
Semoga berguna, dan selamat mencoba.
TERIMA KASIH kepada Dewa Ji SamSoe atas cluenya.
Label: | 0 komentar

MadGrafz Free WordPress Themes

Setelah sekian lama utak atik WordPress akhirnya saya mencoba membuat Themes gratis / Free WordPress themes sendiri. Awalnya kepingin buat Free WordPress Magazine Themes Style, tapi blom bisa masih perlu banyak pembelajaran. Terinspirasi Nyontek dari beberapa free wordpress themes yang dibuat oleh suhu suhu wordpress di luaran sana, dan mengkombinasikannya sehingga akhirnya jadilah Madgrafz Free WordPress Theme. Themes ini sempat saya gunakan pada blog saya ini, pada versi sebelumnya.

MadGrafz Free WordPress Themes.

  • 3 Columns WordPress Themes
  • Width 1000px fix
  • Widget Ready
  • 3 widget ( Widget 1 – sidebar left, Widget 2 – sidebar right, Widget 3 – footer )
  • Compatible in WP 2.+
  • Compatible in Mozilla 2 & 3, Safari, IE 7, Opera & Netscape

MadGrafz Free WordPress Themes Feature

1. Thumbnail Image Post

MadGrafz Free WordPress Themes ini sudah dilengkapi dengan feature Thumbnail Images Post. dengan menggunakan custom field pada saat kita membuat postingan. sehingga tiap post memiliki thumbnail images.

2. Index Post Per Category

Pada standar wordpress themes di halaman index ( home page ) biasanya postingan yang muncul tidak di kelompokkan sesuai category, tapi pada MadGrafz Free WordPress Themes postingan akan di kelompokkan berdasarkan category dan di tampilkan di home pages.

3. Design Source

Source design MadGrafz Free WordPress Themes dalam format psd. bisa di dapatkan dalam folder themes, sehingga memudahkan dalam menggati header image dan footer image.
Untuk keterangan dan feature feature lebih lanjut, silahkan download dan baca file readme.txt. silahkan dicoba dan di comment, bwat suhu suhu yang mampir tolong di kasi masukan. terima kasih.
Screen shot | Download
Label: | 0 komentar

Cara Upgrade WordPress ke Versi Terbaru

Upgrade WordPress

Akirnya salah satu blog saya yang masih menggunakan WordPress versi 2.3.2 kini telah terupgrade ke versi terbaru yaitu WordPress Version 2.7.1. sebelumnya mengalami sedikit kebingungan dan ketakutan akan error dan sedikit malas backup mem backup, saya urungkan niat untuk mengupgrade blog saya yang sudah kadaluarsa itu, sampai akhirnya saat saya blog walking dan nemu WordPress plugins yang membantu saya upgrade wordpress dari versi dodol ke versi terbaru.
InstantUpgrade plugin itulah nama pluginnya yang membantu saya dengan cepatnya upgrade WordPress ke cersi terbaru. cuma dengan beberapa klik dan butuh waktu kurang dari 2 menit akhirnya mesin blog saya terupdate ke Version 2.7.1. kini saya tinggal menyesuaikan wordpress themes aja. karena dari wordpress 2.3.. ke wordpress 2.7.. mengalami sedikit perubahan pada nama file thumbnailnya.
Download & Petunjuk lengkap penggunaan InstantUpgrade plugin bisa di dapetin disini.
Silahkan mencoba. semoga bermanfaat.
Label: | 0 komentar

Pengenalan Dreamweaver dan Layout


Seperti kata Pak Patah eh salah itu nama tetangga saya :) maksudnya Kata PEPATAH "Tak kenal maka tak sayang" oleh karena itu alangkah baiknya bila kita menilik apa itu Dreamweaver?
DREAMWEAVER (dulu milik dari macromedia namun sekarang menjadi milik dari Adobe) adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — dalam bahasa sansekerta artinya ( Apa yang kamu lihat akan menjadi seperti apa yang kamu inginkan) masih bingung ya intinya Kita tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs karena sudah disiapkan secara instant seperti membuat Table, Membuat Hyperlink, Memasukkan Gambar, termasuk memasukkan Flash Animasi, dll. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Mantab Bukan!!! 

logo dreamweaver
Gambar 1 . Tampilan LogoDreamweaver


layout dreamweaver
Gambar 2 . Tampilan / Layout Dreamweaver


Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar.
- LEMBAR KERJA DREAMWEAVER adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya.
- INSERT TOOLBAR adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
- PENGATURAN HALAMAN berguna untuk melakukan pengeditan pada suatu elemen di Document Window.
- PANEL GROUP merupakan kumpulan dari panel-panel Dreamweaver. 
Label: | 2 komentar
Langganan: Postingan (Atom)